<template>
    <div class="myLikeContainer">
        <div class="myLikeContent">
            <div class="back" @click="goBack"></div>
            <p class="title">我的点赞</p>
            <div class="other"></div>
        </div>
        <div class="forumContainer">
            <ul class="forumContent">
                <li v-for="forum in forums" :key="forum.id">
                    <div class="forum">
                        <div class="userContent">
                            <div class="userInfo">
                                <div class="headImg"></div>
                                <div class="nameContent">
                                    <p class="name">{{ forum.name }}</p>
                                    <p class="time">{{ forum.time }}</p>
                                </div>
                            </div>
                            <div class="followContent">
                                <div class="follow">关注</div>
                                <div class="userMore">...</div>
                            </div>
                        </div>
                        <p class="forumTitle">{{ forum.title }}</p>
                        <div class="forumImg"></div>
                        <div class="likeContent">
                            <div class="likes">
                                <div class="likeImg"></div>
                                <ul class="likeUsers">
                                    <li>
                                        <div class="userImg first"></div>
                                    </li>
                                    <li>
                                        <div class="userImg second"></div>
                                    </li>
                                    <li>
                                        <div class="userImg third"></div>
                                    </li>
                                </ul>
                                <p class="usersNum">{{ usersNum(forum.id) }}人赞了</p>
                            </div>
                            <div class="heartAndComment">
                                <div class="heart">
                                    <div class="heartImg"></div>
                                    <p class="heartMum">{{ forum.heartNum }}</p>
                                </div>
                                <div class="comment">
                                    <div class="commentImg"></div>
                                    <p class="commentNum">{{ forum.commentNum }}</p>
                                </div>
                            </div>
                        </div>
                        <input type="text" v-model="myComment" placeholder="发表我的意见">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'myLike',
        data(){
            return{
                forums:[
                    {id:0,name:'hhhin',time:'16分钟前',
                        title:'分享一下我改善多囊卵巢的经验',users:[
                            {id:0},{id:1},{id:2},{id:3},{id:4}
                        ],heartNum:12,commentNum:3},
                    {id:1,name:'hhhin',time:'16分钟前',
                        title:'分享一下我改善多囊卵巢的经验',users:[
                            {id:0},{id:1},{id:2},{id:3},{id:4}
                        ],heartNum:12,commentNum:3}
                ],
                myComment:''
            }
        },
        computed:{
            usersNum(){
                return (id)=>{
                    for(let i=0;i<this.forums.length;i++){
                        if(id===this.forums[i].id){
                            return this.forums[i].users.length
                        }
                    }
                }
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            }
        }
    }
</script>

<style scoped>
    .myLikeContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        overflow-x:hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .myLikeContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: 0.32rem;
    }
    .forumContainer{
        width: 100vw;
        margin: 0 auto;
        margin-top: 1.76rem;
    }
    .forumContent{
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .forum{
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #FFF;
        margin-bottom: .2rem;
    }
    .userContent{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .userInfo{
        display: flex;
        align-items: center;
    }
    .headImg{
        width:.88rem;
        height: .88rem;
        background-color: #F6F8FA;
        border-radius: 50%;
    }
    .nameContent{
        margin-left: .2rem;
        display: flex;
        flex-direction: column;
    }
    .name{
        color:#333333;
        font-size: .24rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .time{
        color:#999999;
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
    }
    .followContent{
        display: flex;
    }
    .follow{
        color:rgb(115, 173, 237);
        border: 1px solid rgb(115, 173, 237);
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        width: .74rem;
        height: .44rem;
        border-radius: .3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .userMore{
        margin-left: .2rem;
    }
    .forumTitle{
        width: 6.86rem;
        margin: 0 auto;
        margin-top: .2rem;
        color:#333333;
        font-size: .32rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .forumImg{
        width: 6.86rem;
        height: 200px;
        background-color: #F6F8FA;
        border-radius: .2rem;
        margin: 0 auto;
        margin-top: .2rem;
    }
    .likeContent{
        width: 6.86rem;
        margin: 0 auto;
        margin-top: .2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .likes{
        display: flex;
        align-items: center;
    }
    .likeImg{
        background-image: url(../assets/img/tab+logo@2x/toCheckLike.png);
        width: .4rem;
        height: .4rem;
        background-position: center;
        background-size: contain;
    }
    .likeUsers{
        margin-left: .1rem;
        display: flex;
        position: relative;
        width: 1.4rem;
        height: .58rem;
    }
    .userImg{
        position: absolute;
        top:0;
        width: .5rem;
        height: .5rem;
        border: 2px solid #FFF;
        border-radius: 50%;
        background-color: #F6F8FA;
    }
    .userImg.second{
        transform: translateX(20px);
    }
    .userImg.third{
        transform: translateX(40px);
    }
    .usersNum{
        margin-left: .1rem;
        color:#999999;
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
    }
    .heartAndComment{
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color:#999999;
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
    }
    .heart,.comment{
        display: flex;
        align-items: center;
    }
    .heartImg{
        background-image: url(../assets/img/tab+logo@2x/heart.png);
        background-position: center;
        background-size: contain;
        width: .4rem;
        height: .4rem;
        margin-right: .1rem
    }
    .commentImg{
        background-image: url(../assets/img/tab+logo@2x/message.png);
        background-position: center;
        background-size: contain;
        width: .4rem;
        height: .4rem;
        margin-right: .1rem;
    }
    input{
        width: 6.86rem;
        margin: 0 auto;
        margin-top: .2rem;
        height: .8rem;
        background-color: rgb(229, 229, 229);
        border: 0px;
        margin-bottom: .1rem;
        border-radius: .8rem;
        text-indent: .3rem;
    }
    input::placeholder{
        font-family: 'PingFangSC-Regular';
        color:#999999;
    }
</style>